import React from 'react';
import {Button, Card, Form, Select, Modal, Table, message} from 'antd';
import axios from './../../axios';
import Utils from './../../utils/utils';

const FormItem = Form.Item;
const Option = Select.Option;


export default class City extends React.Component {

    componentDidMount() {
        this.requestList();
    }


    state = {
        selectCheckRowKeys: [],
        isShowOpenCity: false

    };

    params = {
        page: 1
    };


    //开通城市
    requestList = () => {
        axios.ajax({
            url: '/open_city',
            data: {
                params: {
                    page: this.params.page
                }
            }

        }).then((res) => {
            this.setState({
                list: res.result.item_list.map((item, index) => {
                    item.key = index
                    return item
                }),
                pagination: Utils.pagination(res, (current) => {
                    this.params.page = current
                    this.requestList();
                })

            })
        })

    };


    handleOpenCity = () => {
        this.setState({
            isShowOpenCity: true
        })


    };

    handleOpen = () => {

        let cityInfo = this.cityForm.props.form.getFieldsValue();
        console.log('cityInfo', cityInfo);


        axios.ajax({
            url: '/city/open',
            data: {
                params: cityInfo
            }
        }).then((res) => {
            if (res.code == 0) {
                message.success('开通成功！');
                this.setState({
                    isShowOpenCity: false
                })
                this.requestList();
            }
        })
    };

    render() {
        const columns = [
            {
                title: '城市ID',
                dataIndex: 'id'
            }, {
                title: '城市名称',
                dataIndex: 'name'
            }, {
                title: '用车模式',
                dataIndex: 'mode',
                render(mode) {
                    return mode ===1?'停车点':'禁停区';
                }
            }, {
                title: '营运模式',
                dataIndex: 'op_mode',
                render(op_mode) {
                    return op_mode ===1?'自营':'加盟';
                }
            }, {
                title: '授权加盟商',
                dataIndex: 'franchisee_name'
            }, {
                title: '城市管理员',
                dataIndex: 'city_admins',
                render(arr) {
                    return arr.map((item) => {
                        return item.user_name
                    }).join(',')
                }
            }, {
                title: '城市开通时间',
                dataIndex: 'open_time'
            }, {
                title: '操作时间',
                dataIndex: 'update_time',
                render:Utils.formatDate
            }, {
                title: '操作人',
                dataIndex: 'sys_user_name'
            }
        ];

        return (
            <div>
                <Card title="">
                    <FilterForm/>
                </Card>
                <Card style={{marginTop: 10}}>
                    <Button type="primary" onClick={this.handleOpenCity}>开通城市</Button>
                </Card>
                <div className="content-wrap">
                    <Table
                        bordered
                        columns={columns}
                        dataSource={this.state.list}
                        pagination={this.state.pagination}
                    />
                </div>
                <Modal
                    title="开通城市"
                    visible={this.state.isShowOpenCity}
                    onCancel={() => {
                        this.setState({
                            isShowOpenCity: false
                        })
                    }}
                    onOk={this.handleOpen}
                >

                    <OpenCityForm wrappedComponentRef={(inst) => {
                        //获取到表单输入的信息：cityForm命名可以随便，这样访问props：this.cityForm.props
                        this.cityForm = inst
                    }}/>

                </Modal>

            </div>
        );
    }

}

class FilterForm extends React.Component {
    render() {
        const {getFieldDecorator} = this.props.form;

        return (
            <Form layout="inline">
                <FormItem label="城市">
                    {
                        getFieldDecorator('city_id', {})(
                            <Select
                                style={{width: 200}}
                                placeholder="全部">
                                <Option value="">全部</Option>
                                <Option value="1">北京市</Option>
                                <Option value="2">天津市</Option>
                                <Option value="3">深圳市</Option>
                            </Select>
                        )
                    }

                </FormItem>
                <FormItem label="用车模式">
                    {
                        getFieldDecorator('mode', {})(
                            <Select
                                style={{width: 250}}
                                placeholder="全部">
                                <Option value="">全部</Option>
                                <Option value="1">制定停车点模式</Option>
                                <Option value="2">禁停区模式</Option>
                            </Select>
                        )
                    }

                </FormItem>
                <FormItem label="营运模式">
                    {
                        getFieldDecorator('op_mode', {})(
                            <Select
                                style={{width: 180}}
                                placeholder="全部">
                                <Option value="">全部</Option>
                                <Option value="1">自营</Option>
                                <Option value="2">加盟</Option>
                            </Select>
                        )
                    }

                </FormItem>
                <FormItem label="加盟商授权状态">
                    {
                        getFieldDecorator('auth_status', {})(
                            <Select
                                style={{width: 180}}
                                placeholder="全部">
                                <Option value="">全部</Option>
                                <Option value="1">已授权</Option>
                                <Option value="2">未授权</Option>
                            </Select>
                        )
                    }

                </FormItem>
                <FormItem>
                    <Button type="primary" style={{marginRight: 10}}>查询</Button>
                    <Button type="primary">重置</Button>

                </FormItem>
            </Form>
        );
    }


}


FilterForm = Form.create()(FilterForm);


class OpenCityForm extends React.Component {

    render() {
        console.log('this.props.form', this.props.form);
        const {getFieldDecorator} = this.props.form;
        const formLayout = {
            labelCol: {
                span: 5
            },
            wrapperCol: {
                span: 19
            }
        };


        return (
            <div>
                <Form>
                    <FormItem label="城市选择" {...formLayout}>
                        {
                            getFieldDecorator('city_id', {})(
                                <Select
                                    style={{width: 200}}
                                >
                                    <Option value="1">北京市</Option>
                                    <Option value="2">天津市</Option>
                                    <Option value="3">深圳市</Option>
                                </Select>
                            )
                        }

                    </FormItem>
                    <FormItem label="营运模式" {...formLayout}>
                        {
                            getFieldDecorator('op_mode', {})(
                                <Select
                                    style={{width: 200}}
                                >
                                    <Option value="1">自营</Option>
                                    <Option value="2">加盟</Option>
                                </Select>
                            )
                        }

                    </FormItem>
                    <FormItem label="用车模式" {...formLayout}>
                        {
                            getFieldDecorator('mode', {})(
                                <Select
                                    style={{width: 200}}
                                >
                                    <Option value="1">制定停车点模式</Option>
                                    <Option value="2">禁停区模式</Option>
                                </Select>
                            )
                        }

                    </FormItem>


                </Form>
            </div>
        );
    }


}

OpenCityForm = Form.create()(OpenCityForm);



